<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <p>欢迎首页</p>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
                <!-- 上次登录时间 -->
                <div class="last-login-time">
                    <p><Icon type="md-contact" /> Admin 您好，欢迎使用闲贰商品交易后台管理系统</p>
                    <p><Icon type="md-clock" />  您上次登录时间：{{lastLoginTime | dataFormat}} <span class="location"><Icon type="ios-pin" /> {{addr}}</span></p>
                </div>
                <!-- 网站数据统计 -->
                <div class="statistic-info">
                    <b-row>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-one">
                                <div class="item-left">
                                    <p class="total">总用户</p>
                                    <p class="num">{{userCount}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="md-person-add" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-two">
                                <div class="item-left">
                                    <p class="total">入驻商家</p>
                                    <p class="num">{{busCount}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="md-card" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-three">
                                <div class="item-left">
                                    <p class="total">商品总数</p>
                                    <p class="num">{{goodCount}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="md-pricetags" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-four">
                                <div class="item-left">
                                    <p class="total">求购商品数</p>
                                    <p class="num">{{wantGoodCount}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="ios-color-wand-outline" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-five">
                                <div class="item-left">
                                    <p class="total">总浏览量</p>
                                    <p class="num">{{viewNum}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="ios-eye" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-six">
                                <div class="item-left">
                                    <p class="total">用户总评论</p>
                                    <p class="num">{{comments}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="ios-chatbubbles-outline" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-seven">
                                <div class="item-left">
                                    <p class="total">订单成交量</p>
                                    <p class="num">{{orderCount}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="md-cart" />
                                </div>
                            </div>
                        </b-col>
                        <b-col cols="6" sm="6" md="3" lg="3">
                            <div class="box-item item-eight">
                                <div class="item-left">
                                    <p class="total">成交总金额</p>
                                    <p class="num">{{totalPrice}}</p>
                                </div>
                                <div class="item-right">
                                    <Icon type="logo-usd" />
                                </div>
                            </div>
                        </b-col>
                    </b-row>
                </div>
                <b-container class="bv-example-row row-box">
                    <b-row class="my-userAuthInfo">
                        <b-col cols="6" sm="6" md="4" lg="8">
                            <type-echarts></type-echarts>
                        </b-col>
                    </b-row>
                </b-container>
            </div>
        </div>
    </div>
</template>

<script>
import typeEcharts from '@/components/admin/TypeEcharts.vue'
import getCurrentCityName from '@/utils/getUserLocation'
export default {
  name: 'AdminHome',
  data () {
    return {
      addr: '', // 定位城市
      lastLoginTime: JSON.parse(localStorage.getItem('admin')).uLastLogintime,
      userCount: 0, // 用户总数
      busCount: 0, // 入驻商家数
      goodCount: 0, // 商品总数
      wantGoodCount: 0, // 求购商品总数
      viewNum: 0, // 总浏览量
      comments: 0, // 总评论数
      orderCount: 0, // 订单成交量
      totalPrice: 0 // 订单成交总金额
    }
  },
  mounted () {
    this.getCurrentCity()
  },
  created () {
    this.findUsersCount()
    this.findBusinessCount()
    this.findGoodsCount()
    this.findWantGoodsCount()
    this.findAllViewNum()
    this.findAllCommentCount()
    this.findSuccess()
  },
  methods: {
    // 百度地图定位获取当前城市
    getCurrentCity () {
      getCurrentCityName().then((city) => {
        // console.log(city) // 顺利的话能在控制台打印出当前城市
        this.addr = city
      })
    },
    // 查询总用户数
    findUsersCount () {
      this.$axios({
        url: 'users/findUsersCount',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.userCount = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查询入驻商家数
    findBusinessCount () {
      this.$axios({
        url: 'users/findBusinessCount',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.busCount = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找商品总数
    findGoodsCount () {
      this.$axios({
        url: 'goods/findGoodsCount',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodCount = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找求购商品总数
    findWantGoodsCount () {
      this.$axios({
        url: 'wantGoods/findWantGoodsCount',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.wantGoodCount = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找总浏览量
    findAllViewNum () {
      this.$axios({
        url: 'goods/findAllViewNum',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.viewNum = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找商品评论和求购评论总数
    findAllCommentCount () {
      this.$axios({
        url: 'goodsComment/findAllCount',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.comments = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查找订单交易成功的列表
    findSuccess () {
      this.$axios({
        url: 'orders/findSuccess',
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.orderCount = res.data.list.length
          res.data.list.forEach(item => {
            this.totalPrice += item.oTotalAmount
          })
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  components: {
    typeEcharts
  }
}
</script>

<style scoped>
/* 主要内容区域 */
.content-inner{
    width: 100%;
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
}
/* 上次登录时间 */
.last-login-time{
    width: 100%;
    padding:10px 10px 10px 20px;
}
.last-login-time p {
    margin-bottom: 10px;
}
.statistic-info {
    padding: 10px;
}
.box-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 15px;
    margin-bottom: 30px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.item-left p {
    margin-bottom: 0;
}
.item-left .total {
    font-size: 12px;
}
.item-left .num {
    font-size: 25px;
    font-weight: 500;
}
.item-right {
    font-size: 45px;
}
.item-one {
    background: #65a6ff;
}
.item-two {
    background: #fc0;
}
.item-three {
    background: #fa7753;
}
.item-four {
    background: #5e72e4;
}
.item-five {
    background: #2dce89;
}
.item-six {
    background: #f5365c;
}
.item-seven {
    background: #a8acb1;
}
.item-eight {
    background: #9cd159;
}
.location {
    display: inline-block;
    margin-left: 20px;
}
</style>
